<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!-- 添加搜索区域 -->
      <el-row :gutter="40">
        <el-col :span="7">
          <el-button type="primary" @click="showAddDialog" style="margin: 20px;">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 内容table -->
      <tree-table :data="cateList" :columns="columns" :selection-type="props.selectionType" :expand-type="props.expandType"
        :show-index="props.showIndex" index-text="#" border>
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.status === true" style="color: green;font-size: 20px ;"></i>
          <i class="el-icon-error" v-else style="color: red;font-size: 20px ;"></i>
        </template>
        <template slot="level" slot-scope="scope">
          <el-tag type="success" v-if="scope.row.level === 1">一级标签</el-tag>
          <el-tag type="info" v-if="scope.row.level === 2">二级标签</el-tag>
          <el-tag type="warning" v-if="scope.row.level === 3">三级标签</el-tag>
        </template>
        <template slot="operation" slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="修改分类" placement="top" :hide-after="1000">
            <el-button type="primary" icon="el-icon-edit" size="small " circle @click="showEditDialog(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除分类" placement="top" :hide-after="1000">
            <el-button type="danger" icon="el-icon-delete" size="small " circle @click="removeCate(scope.row)" v-if="scope.row.level === 3"></el-button>
          </el-tooltip>
        </template>
      </tree-table>
      <!-- 添加角色表单的对话框 -->
      <el-dialog title="添加角色" :visible.sync="addDialogVisible" id="addUser" @close="addDialogClose" width="50%">
        <!-- 内容主体区 -->
        <el-form :model="form" ref="form" label-width="100px">
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="form.name" style="width: 300px;" clearable></el-input>
          </el-form-item>
          <el-form-item label="分类类别">
            <el-cascader v-model="selectedKey" placeholder="不选择为一级分类" :options="options" clearable="" :props="{ expandTrigger: 'hover',value: 'id', label: 'name', checkStrictly: true, }"
              @change="handleChange">
            </el-cascader>
          </el-form-item>
        </el-form>
        <!-- 底部区 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCateConfirm">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改分类的对话框表单 -->
      <el-dialog title="修改角色" :visible.sync="editDialogVisible" id="editUser" @close="addDialogClose">
        <!-- 内容主体区 -->
        <el-form :model="form" ref="form" label-width="70px">
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入角色名称"></el-input>
          </el-form-item>
          <el-form-item label="分类类别">
            <el-cascader v-model="selectedKey" placeholder="不选择为一级分类" :options="options" clearable="" :props="{ expandTrigger: 'hover',value: 'id', label: 'name', checkStrictly: true, }"
              @change="handleChange">
            </el-cascader>
          </el-form-item>
        </el-form>
        <!-- 底部区 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editRoleConfirm">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 请求参数
      queryInfo: {
        params: 1,
        pageNum: 1,
        pageSize: 10
      },
      // 存放分类的list
      cateList: [],
      // 添加时选择的级联选项
      options: [],
      // 添加时选择的级联已选项
      selectedKey: [],
      // 分类总数
      total: 0,
      addDialogVisible: false,
      // tree参数
      props: {
        stripe: false, // 是否显示间隔斑马纹
        border: false, // 是否显示纵向边框
        showHeader: true, // 是否显示表头
        showSummary: false, // 是否显示表尾合计行
        showRowHover: true, // 鼠标悬停时，是否高亮当前行
        showIndex: true, // 是否显示数据索引
        treeType: true, // 是否为树形表格
        isFold: true, // 树形表格中父级是否默认折叠
        expandType: false, // 是否为展开行类型表格（为 True 时，需要添加作用域插槽, 它可以获取到 row, rowIndex)
        selectionType: false // 是否显示间隔斑马纹
      },
      columns: [{
        label: '分类名称',
        prop: 'name'
      },
      {
        label: '分类状态',
        // 指定为模板类
        type: 'template',
        template: 'isok'
      },
      {
        label: '分类级别',
        // 指定为模板类
        type: 'template',
        template: 'level'
      },
      {
        label: '分类级别',
        // 指定为模板类
        type: 'template',
        template: 'operation'
      }
      ],
      // 修改和添加共用
      form: {
        id: null,
        name: '',
        pid: 0,
        level: 0
      },
      editDialogVisible: false

    }
  },
  created () {
    this.queryInfo.params = 3
    this.getCateList()
  },
  methods: {
    async getCateList () {
      const {
        data: res
      } = await this.$http.post('goods/cateList', this.queryInfo)
      if (res.result !== 'SUCCESS') {
        return this.$message.error('获取列表失败')
      }
      this.cateList = res.data.cateList.list
      this.total = res.data.cateList.total
      this.queryInfo.pageNum = res.data.cateList.pageNum
      this.queryInfo.pageSize = res.data.cateList.pageSize
      console.info(res.data)
    },
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getCateList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pageNum = newPage
      this.getCateList()
    },
    async addCateConfirm () {
      console.info(this.form)
      const {
        data: res
      } = await this.$http.post('goods/cateList/add', this.form)
      if (res.result !== 'SUCCESS') {
        return this.$message.error('新建分类失败')
      }
      this.addDialogVisible = false
      return this.$message.success('新建成功')
    },
    // 点击选项发生的事件
    handleChange () {
      console.info(this.selectedKey)
      if (this.selectedKey.length < 1) {
        this.form.level = 1
        this.form.pid = 0
      } else {
        this.form.level = this.selectedKey.length + 1
        this.form.pid = this.selectedKey[this.selectedKey.length - 1]
      }
    },
    // 显示添加对话框
    async showAddDialog () {
      this.queryInfo.params = 2
      await this.getCateList()
      console.info(this.queryInfo.params)
      this.getTreeData(this.cateList)
      this.options = this.cateList
      this.addDialogVisible = true
    },
    // 设置children为空时为undefined
    getTreeData (data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children)
        }
      }
      return data
    },
    addDialogClose () {
      this.$refs.form.resetFields()
      this.queryInfo.params = 3
      this.getCateList()
    },
    async showEditDialog (cateInfo) {
      this.queryInfo.params = 2
      await this.getCateList()
      this.getTreeData(this.cateList)
      this.options = this.cateList
      this.editDialogVisible = true
      this.form.name = cateInfo.name
      this.form.level = cateInfo.level
      this.form.pid = cateInfo.pid
      this.form.id = cateInfo.id
    },
    async editRoleConfirm () {
      const {
        data: res
      } = await this.$http.post('goods/cateList/edit', this.form)
      if (res.result !== 'SUCCESS') {
        return this.$message.error('修改分类失败')
      }
      this.editDialogVisible = false
      return this.$message.success('修改成功')
    },
    async removeCate (cateInfo) {
      // 询问是否删除
      const confirmResult = await this.$confirm('此操作将永久删除该分类:' + cateInfo.name + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => {
        return error
      })
      if (confirmResult === 'confirm') {
        const {
          data: res
        } = await this.$http.get('goods/cateList/delete', {
          params: {
            cateId: cateInfo.id
          }
        })
        if (res.result !== 'SUCCESS') {
          this.$message.error(res.message)
        } else {
          this.$message.success('删除分类成功')
          this.getCateList()
        }
      } else {
        this.$message.info('取消该分类')
      }
    }
  }

}

</script>

<style>
</style>
